<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>

<body>
    <!-- HTML的标签 其实只能接受字符串数据 -->
    <div id="app">
        <h3>插值表达式</h3>
        <!-- v-pre 是vue手动描述不解析语法的特殊指令 -->
        <pre class="note" v-pre>
        语法：Mustache语法  {{ msg }}
        功能：取决于JS框架为其赋予的功能特性，在不同的框架下 语法功能能不同
              vue的插值表达式其实就是VUE语法中定义个一个特殊的执行方法
              es-module 脚本 284 行
              <code>
                /**
                * For converting {{ interpolation }} values to displayed strings.
                * @private
                */
                const toDisplayString = (val) => {
                    // typeof null 返回 object
                    // 嵌套三目运算符
                    // 350 const isString = (val) => typeof val === 'string';
                    return isString(val) // 判断插值表达式写入的变量是否为string数据
                        ? val  // string数据原值返回到页面
                        : val == null  // 判断插值比倒是写入的变量是否为 null 或 undefined 【 和null比较返回true 只有null和undefined 】
                            ? '' // 如果是输出 空字符串
                            // 345 const isArray = Array.isArray;
                            // 352 const isObject = (val) => val !== null && typeof val === 'object';
                            // 356 const objectToString = Object.prototype.toString;
                            // 349 const isFunction = (val) => typeof val === 'function';
                            //  判断是否为数组 || ( 判断是否为object类型数据 && ( 数据变量是否存在自定义的toString方法 ) )
                            : isArray(val) || (isObject(val) && (val.toString === objectToString || !isFunction(val.toString)))
                                ? JSON.stringify(val, replacer, 2) // 数组直接以JSON格式输出
                                : String(val); // 剩余的数据全部完成强制类型转换操作 ==> JS的强制类型转换其实就是toString方法的调用
                };
              </code>
                !! 总结： null和undefined返回空字符串,未重写toString的数组和对象调用 JSON.stringify，其余变量一律强制类型转换
        范围：插值表达式只能被定于标签内容中(页面内容中)
        使用：＜标签＞{{ Vue对象数据仓库变量|匿名变量|JS表达式|JS内置对象 }}＜/标签＞
        特性：响应式=标签基于vue语法加载的仓库变量发生变化，该标签会被重新渲染
        </pre>
        <p>msg：{{ msg }}</p>
        <!-- <p class="msg变量">属性使用</p> -->
        <p class="{{ msg }}">属性使用-插值表达式语法不解析不识别</p>
        <h4>插值表达式的数据取值</h4>
        <ul>
            <li>string:{{ str }}</li>
            <li>number:{{ num }}</li>
            <li>boolean:{{ flag }}</li>
            <li>arr:{{ arr }}</li>
            <li>user:{{ user }}</li>
            <li>pDom:{{ pDom }}</li>
            <li>show：{{ show }}</li>
            <li>arg1-null:{{ arg1 }}</li>
            <li>arg2-undefined:{{ arg2 }}</li>
            <li>date:{{ day }}</li>
            <li>set:{{ set }}</li>
        </ul>
        <h4>插值表达式的匿名变量-【插值表达式内部依据JS变量定义规则直接输出数据】</h4>
        <ul>
            <li>string:字符串</li>
            <li>string:{{ "字符串" }}</li>
            <li>string:{{ '字符串' }}</li>
            <li>string:{{ `字符串-msg-${ msg }` }}</li>
            <li>number:{{ 1000 }}</li>
            <li>day:{{ new Date() }}</li>
            <li>arr:{{ [1,2,3,4,5,6] }}</li>
            <!-- vue中匿名对象的定义必须通过 空格 分割语法 -->
            <li>user:{{ { name:"tom",age:23 } }}</li>
        </ul>
        <!-- 
            赋值表达式 => 定义变量变量取值
            运算表达式 => 四则运算、比较运算、逻辑运算、……
            三目表达式 => 三目运算符【三元运算符】
            取值表达式 => . 属性方法调用运算符,  [] 带有计算功能的属性方法调用运算符
        -->
        <h4>插值表达式执行JS表达式【运算表达式、三目表达式】</h4>
        <ul>
            <li>num2 : {{ num2 }}</li>
            <li>num2*100 : {{ num2*100 }}</li>
            <li>num2*100 : {{ num2*100 }}%</li>
            <li>flag2 : {{ flag2 }}</li>
            <li>flag2?"是":"否" : {{ flag2 ? "是":"否" }}</li>
            <li>
                <ol>
                    <li>用户姓名:{{ user.name }}</li>
                    <li>用户年龄:{{ user["age"] }}</li>
                    <li>用户年龄:{{ user["ag"+"e"] }}</li>
                    <li>用户年龄:{{ user[key] }}</li>
                    <!-- 数组下标叫做地址偏移量 -->
                    <li>arr[0]:{{ arr[0] }}</li>
                    <li>arr[1]:{{ arr[1] }}</li>
                    <li>arr[2]:{{ arr[2] }}</li>
                </ol>
            </li>
            <li>arr的长度:{{ arr.length }}</li>
            <li>arr中是否存在4:{{ arr.indexOf(4)==-1?'不存在':'存在' }}</li>
            <li>arr中是否存在字符串 aa :{{ arr.indexOf('aa')==-1?'不存在':'存在' }}</li>
        </ul>
        <h4>插值表达式调用JS内置对象</h4>
        <ul>
            <li>Math:{{ Math }}</li>
            <li>Math.PI:{{ Math.PI }}</li>
            <li>JSON:{{ JSON }}</li>
            <li>JSON.stringify:{{ JSON.stringify(user) }}</li>
        </ul>
        <h4>插值表达式的注意事项</h4>
        <ul>
            <!-- 
                向元素填充内容的JS dom操作属性
                    innerHTML => 将字符串格式的HTML字符在页面中渲染成标签
                    innerText => 以字符串原始的数据格式进行内容填充渲染，同时完成JS转义\n到<br>的修改
                    textContent => 以字符串原始的数据格式进行内容填充渲染
            -->
            <li>vue的插值表达式通过DOM的textContent属性完成内容填充操作</li>
            <li>html格式字符串将不被解析</li>
            <li>js 转义符将不被识别</li>
            <li>temp:{{ temp }}</li>
            <li>info:{{ info }}</li>
        </ul>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    // Math:111, // JS的保留关键字在仓库中不要定义
                    msg: "msg变量",
                    // ----------
                    str: "字符串",
                    num: 100,
                    flag: true,
                    arr: [1, 2, 3, 4, 5],
                    key:"age",
                    user: {
                        name: "tom",
                        age: 23
                    },
                    // DOM元素在JS变量中属于什么数据类型
                    pDom: document.createElement("p"),
                    set: new Set([1, 2, 3, 4, 5]),
                    day: new Date(),
                    arg1: null,
                    arg2: undefined,
                    show:function(){
                        console.log("show")
                    },
                    num2:0.3,
                    flag2:false,
                    temp:"<h1>字符串方式描述的h1标签\n带有JS换行符</h1>",
                    info: "\u003Cp style=\"text-align: center;\"\u003E\u003Cimg src=\"https://oa.itany.com/itmupload/1645663883070.jpg\" title=\"图⽚无法加载\" alt=\"图⽚无法加载\"/\u003E\u003C/p\u003E\u003Cp style=\"text-align: center;\"\u003E\u003Cbr/\u003E\u003C/p\u003E\u003Cp style=\"text-align: center;\"\u003E\u003Cstrong\u003E\u003Cspan style=\"font-size: 20px;\"\u003E热烈欢迎无锡中科软信息技术有限公司莅临我校招聘人才\u003C/span\u003E\u003C/strong\u003E\u003C/p\u003E\u003Cp\u003E\u003Cbr/\u003E\u003C/p\u003E\u003Cp style=\"margin: 0px 0px 25px; text-indent: 0px; line-height: 150%; background: rgb\u0028255, 255, 255\u0029; text-align: center;\"\u003E\u003Cspan style=\"font-family: 宋体;color: rgb\u002851, 51, 51\u0029;letter-spacing: 0;font-size: 16px\"\u003E\u003Cspan style=\"font-family:宋体\"\u003E无锡中科软信息技术有限公司创立于\u003C/span\u003E\u003Cspan style=\"font-family:宋体\"\u003E2005年，由原中科院软件所和江苏中科软件改制重组而成。公司长期专注于电子政务应用软件及整体解决方案的研发和服务，是国内领先的电子政务应用软件开发服务商，是政府认定的“江苏省软件企业”、“江苏省民营高新技术企业”、“双软企业”，公司先后通过质量管理体系ISO9001、信息安全管理ISO27001、IT服务管理体系ISO20000、软件能力成熟度模型CMMI ML3级等国际标准的资质认证。\u003C/span\u003E\u003C/span\u003E\u003C/p\u003E\u003Cp style=\"margin: 0px 0px 25px; text-indent: 0px; line-height: 150%; background: rgb\u0028255, 255, 255\u0029; text-align: center;\"\u003E\u003Cspan style=\"font-family: 宋体;color: rgb\u002851, 51, 51\u0029;letter-spacing: 0;font-size: 16px\"\u003E\u003Cspan style=\"font-family:宋体\"\u003E公司自主研发的产品先后获得计算机软件著作权\u003C/span\u003E\u003Cspan style=\"font-family:宋体\"\u003E39项、江苏省优秀软件“金慧奖”1项、科技部创新项目1项、发明专利1项、在报发明专利2项。\u003C/span\u003E\u003C/span\u003E\u003C/p\u003E\u003Cp style=\"text-align: center;\"\u003E\u003Cbr/\u003E\u003C/p\u003E",
                }
            }
        }).mount("#app")
    </script>
</body>

</html>